<template>
    <div>
      <!--修改模板-->
      <el-form v-model="formObj">
        <el-form-item label="搜索条件" label-width="80px">
          <!--<el-transfer v-model="returnTable" :data="data"></el-transfer>-->
          <el-transfer v-model="formObj.searchList"
                       filterable
                       :left-default-checked="[2, 3]"
                       :right-default-checked="[1]"
                       :render-content="renderFunc"
                       :format="{
                        noChecked: '${total}',
                        hasChecked: '${checked}/${total}'
                        }"
                       @change="handleChange"
                       :data="searchData"
                       :titles="titles"></el-transfer>
        </el-form-item>

        <el-form-item label="操作条件" label-width="80px">
          <el-checkbox-group v-model="formObj.buttonList">
            <el-checkbox label="查询" border></el-checkbox>
            <el-checkbox label="新增" border></el-checkbox>
            <el-checkbox label="修改" border></el-checkbox>
            <el-checkbox label="删除" border></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="返回内容字段">
          <el-transfer v-model="formObj.returnList" :data="returnTable" :titles="titles"></el-transfer>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="updateTemplate">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>
<script>
export default {
  name: 'customUpdateTemplate',
  data() {
    const generateSearchData = _ => {
      var result = {
        "success": true,
        "errorCode": 0,
        "payload":  [{"attr":"a","attrCn":"图片","type":"VARCHAR"},{"attr":"a's","attrCn":"视频","type":"VARCHAR"},{"attr":"a's'w","attrCn":"网站","type":"VARCHAR"}]
      }
      const data = []
      result.payload.forEach((item) => {
        data.push({
          key: item.attr,
          label: item.attrCn,
          disabled: false
        });
      })
      return data;
    };
    const generateTableData = _ => {
      var result = {
        "success": true,
        "errorCode": 0,
        "payload": [{"attr":"a","attrCn":"图片","type":"VARCHAR"},{"attr":"a's","attrCn":"视频","type":"VARCHAR"},{"attr":"a's'w","attrCn":"网站","type":"VARCHAR"}]
      }
      const data = []
      result.payload.forEach((item) => {
        data.push({
          key: item.attr,
          label: item.attrCn,
          disabled: false
        });
      })
      return data;
    };
    return {
      searchData :generateSearchData(),
      searchList: [],
      returnTable : generateTableData(),
      returnList: [],
      titles:['备选字段','已选字段'],
      formObj:{
        searchList:[],
        buttonList: [],
        returnList:[]
      }
    };
  },
  created() {

  },
  methods: {
    updateTemplate() {

    }
  }
};
</script>
